<template>
	<view>
		<!-- 搜索 -->
		<view class="bg-white pb-2 px-2">
			<view class="d-flex py-1 rounded-50 span-20 pl-3 pr-2 bg-light-secondary j-sb">
				<input class="ml-2 flex-1" @confirm="seach_confirm" v-model="seach_keywords" type="text" placeholder="搜索商品名称" @input="seach_input"  />
				<u-icon @click="delete_confirm"  name="close" color="#999999" size="28"></u-icon>
			</view>
		</view>
		<!-- 进行中 -->
		
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<view class="" v-if="seach_show">
				<u-checkbox-group>
					<view class="goods_card bg-white m-2 p-3 rounded-20 a-center d-flex" v-for="(item,index) in saleList" :key="index">
							<u-checkbox size="40" v-model="item.checked" active-color="red" shape="circle" @change="checkboxChange"></u-checkbox>
							<view class="goods_card_head d-flex">
								<view class="goods_card_head_left position-relative ">
									<view v-if="item.has_product=='yes'" class="text-white goods_logo position-absolute">多货品</view>
									<image class="" :src="item.img.url?item.img.url:defaltImage" mode=""></image>
								</view>
								<view class="goods_card_head_right pl-3">
									<view class="d-flex">
										<view class="ellipsis pro_name">
											<image v-if="item.is_hot" src="../../static/images/goods/icon_goods_hot.png" class="mr" mode=""></image>
											<image v-if="item.is_new" src="../../static/images/goods/icon_goods_new.png" class="mr" mode=""></image>
											<image v-if="item.is_best" src="../../static/images/goods/icon_goods_best.png" class="mr" mode=""></image>
											<image v-if="item.is_promote" src="../../static/images/goods/promotion.png" class="mr" mode=""></image>
											{{item.name}}
										</view>
									</view>
									<view class="text-light-muted font-md my pt-2">
										<text class="mr-3">库存：{{item.stock}}</text>
										<text>销量：{{item.sales_volume}}</text>
									</view>
									<view class="mt-1 pt">
										<text class="text-danger mr-2 font-35">{{item.shop_price}}</text><text class="font-md text-light-muted tex line-through">{{item.market_price}}</text>
									</view>
								</view>
							</view>
					</view>		
				</u-checkbox-group>
			</view>
			<view class="" v-else>
				<view class="" v-if="!seach_list.length">
					<view class="d-flex flex-column j-center a-center h-100 pb-3">
						<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
						<view class="">暂无任何商品</view>
					</view>
				</view>
				<view class="" v-else>
					<u-checkbox-group>
						<view class="goods_card bg-white m-2 p-3 rounded-20 a-center d-flex" v-for="(item,index) in seach_list" :key="index">
								<u-checkbox size="40" v-model="item.checked" active-color="red" shape="circle" @change="checkboxChange"></u-checkbox>
								<view class="goods_card_head d-flex">
									<view class="goods_card_head_left position-relative ">
										<view v-if="item.has_product=='yes'" class="text-white goods_logo position-absolute">多货品</view>
										<image class="" :src="item.img.url?item.img.url:defaltImage" mode=""></image>
									</view>
									<view class="goods_card_head_right pl-3">
										<view class="d-flex">
											<view class="ellipsis pro_name">
												<image v-if="item.is_hot" src="../../static/images/goods/icon_goods_hot.png" class="mr" mode=""></image>
												<image v-if="item.is_new" src="../../static/images/goods/icon_goods_new.png" class="mr" mode=""></image>
												<image v-if="item.is_best" src="../../static/images/goods/icon_goods_best.png" class="mr" mode=""></image>
												<image v-if="item.is_promote" src="../../static/images/goods/promotion.png" class="mr" mode=""></image>
												{{item.name}}
											</view>
										</view>
										<view class="text-light-muted font-md my pt-2">
											<text class="mr-3">库存：{{item.stock}}</text>
											<text>销量：{{item.sales_volume}}</text>
										</view>
										<view class="mt-1 pt">
											<text class="text-danger mr-2 font-35">{{item.shop_price}}</text><text class="font-md text-light-muted tex line-through">{{item.market_price}}</text>
										</view>
									</view>
								</view>
						</view>		
					</u-checkbox-group>
				</view>
			</view>
		</view>
		<view class="footer"></view>
		<view class="bg-white py-2 w-100 d-flex j-sb position-fixed bottom-0 btn">
			<view class="d-flex a-center ml-5">
				<u-checkbox-group>
					<u-checkbox  active-color="#ee514c" size="45" v-model="checked" shape="circle" @change="checkboxAll" >全选</u-checkbox>
				</u-checkbox-group>
			</view>
			<button type="warn" @click="preserve">确定(已选{{conut}})</button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				saleList:[], // 在售商品列表
				keywords:"", // 关键字
				checked:false, // 全选
				
				seach_show:true,
				seach_keywords:"", // 关键字
				seach_list:"", // 搜索列表
				
				u_loadmore:true, // 加载中
			}
		},
		computed:{
			conut(){
				let num=0
				this.saleList.filter(v=>{
					if(v.checked){
						return num++
					}
				})	
				return num
			}
		},
		methods: {
			// 全选
			checkboxAll(e){
				if(e.value){
					this.saleList.some(v=>{
						v.checked=true
					})
				}else{
					this.saleList.some(v=>{
						v.checked=false
					})
				}
			},
			// 复选框
			checkboxChange(e){
				console.log(e)
			},
			seach_input(e){
				this.seach_keywords=e.detail.value
			},
			// 搜索品牌
			seach_confirm(){
				let keywords=this.seach_keywords
				if(keywords){
					this.seach_list=this.saleList.filter(v=>{
						if(v.goods_name.indexOf(keywords)!=-1){
							return v
						}
					})
					console.log(this.seach_list)
				}
				this.seach_show=false
			},
			// x
			delete_confirm(){
				this.seach_keywords=""
				this.seach_show=true
			},
			// 搜索确认
			seach(){
				if(this.add){
					this.$H.post("admin/merchant/goods/list",{
						on_sale:'true',
						keywords:this.keywords,
					}).then(res=>{
						this.saleList=res.data
						console.log(res)
					})
				}else{
					this.$H.post("admin/promotion/list",{
						keywords:this.keywords,
					}).then(res=>{
						console.log(res)
						this.seach_list=res.data
					})
				}
			},
			// 保存
			preserve(){
				if(this.conut==0){
					this.$u.toast('您还未选择指定商品')
				}else{
					let arr=this.saleList.filter(v=>{
						if(v.checked) return v
					})
					uni.setStorageSync("cash_goods",JSON.stringify(arr))
					uni.navigateTo({
						url:'/pagesA/cash/cash-goods-selected?add='+'添加'
					})
				}
			}
		},
		onLoad(e) {
			this.$H.post("admin/merchant/goods/list",{
				list_type:"selling",
			}).then(res=>{
				let arr=res.data
				arr.filter(v=>{
					return v.checked=false
				})	
				this.u_loadmore=false
				this.saleList=arr
				console.log(this.saleList)	
			})
		}
	}
</script>

<style>
	.goods_card_head_left{
		width: 200upx;
		height: 200upx;
	}
	.goods_card_head_left image{
		width: 200upx;
		height: 200upx;
		border-radius: 20upx;
	}
	.goods_card_head_right image{
		width: 30upx;
		height: 30upx;
	}
	.btn /deep/ button{
		width: 61%;
		border-radius: 60upx;
		margin-left: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
</style>
